<template>
  <div>
  <div class="background">
    <img :src="imgSrc" width="100%" height="100%" alt="" />
  </div>
    <div class="test" style="padding-top: 130px">
    <div class="loginContainer">
      <!--    <video id="v1" autoplay loop muted>-->
      <!--      <source src="./video2.mp4" type="video/mp4"  />-->
      <!--    </video>-->
      <el-form :rules="roles" ref="loginForm" :model="loginForm">
        <h1 class="loginTitle" style="color: rgba(50,50,50,0.8)">系统登陆</h1>
        <el-form-item label="用户名" prop="username"><!-- 校验用户名字 -->
          <el-input v-model="loginForm.username" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password"><!-- 校验密码 -->
          <el-input v-model="loginForm.password" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code"><!-- 校验验证码 -->
          <el-input v-model="loginForm.code" placeholder="点击图片更换验证码" auto-complete="off"
                    @keydown.enter.native="submit"
                    style="width: 100px;"
          ></el-input>
          <img :src="vcUrl" style="margin-left:50px;" @click="updateVerifyCode" alt="">
          <el-checkbox v-model="checked" class="loginRemember" >记住我</el-checkbox><br>
        </el-form-item>

        <el-button type="primary" style="width: 100%;margin-top:-10px" @click="submit" >登录</el-button>
      </el-form>
    </div>
   </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data(){

    return {
      imgSrc:require('@/views/timg.jpg'),
      loginForm :{
        username: "admin",
        password: "123",
        code:"",
      },
      vcUrl: '/verifyCode?time='+new Date(),//生生成的地址每次都是不一样的
      checked: false,
      //表单校验
      roles: {
        username: [{required: true,message:"请输入用户名",trigger:'blur'}],
        password: [{required: true,message:"请输入密码",trigger:'blur'}],
        code: [{required: true,message:"请输入验证码",trigger:'blur'}],
      }
    }
  },
  methods: {
    updateVerifyCode(){
      //为了浏览器认为是重复提交，那么就在每次的请求后加一个时间
      this.vcUrl = '/verifyCode?time='+new Date();
    },
    /**
     * 登录的方法
     */
    submit(){
      //表单校验 [loginForm是校验的名字]
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          //发送请求
          this.postKeyValueRequest('/doLogin',this.loginForm).then(resp => {
            console.log(resp);
            if(resp) {
              //处理成功
              this.$store.commit("INIT_CURRENTHR",resp.obj);//初始当前Hr数据
              window.sessionStorage.setItem("user",JSON.stringify(resp.obj));//用户访问到sessionStorage
              this.$router.replace("/home");//进行页面跳转(注意这是一前端路由操作)
            } else {
              this.vcUrl = '/verifyCode?time='+new Date();
            }
          })
        } else {
          this.$message.error('请输入用户名或者密码');
          return false;
        }
      });
    },
  }

}
</script>
<style scoped lang="scss">
  .background:before{
    border-top: 2px solid rgba(225, 225, 225, 0.2);
    border-left: 1px solid rgba(225, 225, 225, 0.1);
    border-right: 1px solid rgba(225, 225, 225, 0.3);
  }
  .background{
    width:100%;
    height:100%;  /**宽高100%是为了图片铺满屏幕 */
    z-index:-1;
    position: absolute;
  }
  .loginContainer{
    border-radius: 15px;
    background-clip: padding-box;
    margin: 0px auto;
    width: 350px;
    height: 400px;
    padding: 35px 35px 35px 35px;
    /*border: 1px solid #eaeaea;*/
    /*box-shadow: 0 0 100px #cac6c6;*/
    /*background-color: rgba(200,200,200.0.5);*/
    /*border-color: rgba(200,200,200.0.5);*/
    filter: drop-shadow(0px 20px 10px rgba(0, 0, 0, 0.5));
  }
  .loginTitle{
       margin: 20px auto 20px auto;
       text-align: center;
     }
  .loginRemember{
    margin: 10px auto 20px auto;
    float: right;
  }
  /* 改变input框背景颜色 */
  .el-input /deep/ .el-input__inner:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {
    -webkit-text-fill-color: #ededed !important;
    -webkit-box-shadow: 0 0 0 1000px transparent  inset !important;
    background-color:transparent;
    background-image: none;
    /* //背景色透明  生效时长  过渡效果  启用时延迟的时间 */
    transition: background-color 50000s ease-in-out 0s;
  }
  .el-input /deep/ .el-input__inner{
    background-color:transparent;
  }
  .el-input /deep/ .el-input__inner:-webkit-autofill {
    /* //transparent 即设置背景色为透明-可改为其他颜色 */
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: rgba(255,255,255,1)!important;
  }
  /* //关于解决输入框背景颜色 */
</style>
